<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
	<th:block th:include="include/template::header"></th:block>

	<link rel="stylesheet" href="../../static/css/vip.css" th:href="@{/css/vip.css?v=20180703}">

	<!-- S SEO -->
<!-- 	<meta name="keywords" content="your keywords">
	<meta name="description" content="your description"> -->
	<!-- E SEO --> 
	<title>开通VIP_时事一点通</title>
</head>
<body>
	<div class="wrapper">
		<div class="vip-header">
			<div class="container">
				<shiro:guest>
					<span class="vip-header-head"></span>
					<div class="vip-header-ctrl">
						<a href="" data-toggle="modal" data-target="#modal-user" class="open-modal-login">登录</a><span>/</span><a href="" data-toggle="modal" data-target="#modal-user" class="open-modal-reg">注册</a>
						<div class="vip-header-status">尚未开通VIP</div>
					</div>
				</shiro:guest>
				<shiro:user>
					<!-- <span class="vip-header-head" style="background-image: url();"></span> -->
					<span class="vip-header-head" shiro:principal property="imageUrl"></span>
					<div class="vip-header-ctrl">
					<!-- <shiro:principal property="userId"/> -->
						<shiro:principal property="nickname"/>
						<div class="vip-header-status" th:if="${vipMyVo.vipState} == 03">您的VIP已过期，请续费</div>
						<div class="vip-header-status" th:if="${vipMyVo.vipState} == 02">尚未开通VIP</div>
						<div class="vip-header-status" th:if="${vipMyVo.vipState} == 01">VIP有效期至<em th:text="${vipMyVo.endTime}"></em></div>
					</div>
					<span class="vip-logout-btn">退出</span>
				</shiro:user>
			</div>
		</div>
		<div class="container">
			<div class="vip-list row">
				<div class="col-xs-12 col-sm-6" th:each="vipItem,iterStat :${vipBagsVoList}">
					<div class="vip-item">
						<shiro:guest>
							<button class="btn btn-primary btn-radius" data-toggle="modal" data-target="#modal-user">开通</button>
						</shiro:guest>
						<shiro:user> 
							<button class="btn btn-primary btn-radius btn-tovip" th:attr="data-id=${vipItem.id}" th:if="${vipMyVo.vipState} != 02">续费</button>
							<button class="btn btn-primary btn-radius btn-tovip" th:attr="data-id=${vipItem.id}" th:if="${vipMyVo.vipState} == 02">开通</button>
						</shiro:user> 
						<div class="vip-item-inner">
							<div class="vip-item-price" >
								￥<em th:text="${vipItem.price}"></em><span>原价<em th:text="${vipItem.originalPrice}"></em></span>
							</div>
							<h4 th:text="${vipItem.bagName}">套餐名</h4>
							<div class="vip-item-info" th:text="${vipItem.description}">套餐信息</div>
						</div>
					</div>
				</div>
				<!-- <div class="col-xs-12 col-sm-6">
					<div class="vip-item">
						<button class="btn btn-primary btn-radius">开通</button>
						<div class="vip-item-inner">
							<div class="vip-item-price">
								￥20.0<span>原价49.0</span>
							</div>
							<h4>一个月VIP</h4>
							<div class="vip-item-info">有效期31天</div>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-sm-6">
					<div class="vip-item">
						<button class="btn btn-primary btn-radius">开通</button>
						<div class="vip-item-inner">
							<div class="vip-item-price">
								￥20.0<span>原价49.0</span>
							</div>
							<h4>一个月VIP</h4>
							<div class="vip-item-info">有效期31天</div>
						</div>
					</div>
				</div>
				<div class="col-xs-12 col-sm-6">
					<div class="vip-item">
						<button class="btn btn-primary btn-radius">开通</button>
						<div class="vip-item-inner">
							<div class="vip-item-price">
								￥20.0<span>原价49.0</span>
							</div>
							<h4>一个月VIP</h4>
							<div class="vip-item-info">有效期31天</div>
						</div>
					</div>
				</div> -->
			</div>
			<div class="vip-tips">
				<p>温馨提示：</p>
				<ul>
					<li>·VIP开通后不支持退款</li>
					<li>·VIP特权暂时只支持在时事一点通APP使用，<a target="_blank" href="http://a.app.qq.com/o/simple.jsp?pkgname=com.huashitong.ssydt">点击下载APP</a></li>
					<li>·有其他问题请联系客服400-6844-123</li>
				</ul>
			</div>
		</div>
	</div>
	<div class="pay-ok-mod" style="display: none;">
		<div class="pay-ok-header">
			<h3>支付成功</h3>
			<!-- <p>您已成功开通VIP，有效期至2018-09-09</p> -->
			<span class="ok-icon"></span>
		</div>
		<div class="pay-ok-container">
			<form class="form-horizontal pay-ok-form" onsubmit="return false;">
				<div class="form-group">
	                <div class="col-sm-12">
	                    <a class="btn btn-primary btn-block btn-radius" target="_blank" href="http://a.app.qq.com/o/simple.jsp?pkgname=com.huashitong.ssydt">去APP开始刷题吧</a>
	                </div>
	            </div>
	            <div class="form-group">
	                <div class="col-sm-12">
	                    <a href="/money/vip/myaccount" class="btn btn-line btn-block btn-radius">返回</a>
	                </div>
	            </div>
	        </form>
		</div>
	</div>
	<th:block th:include="include/template::modal"></th:block>
	<th:block th:include="include/template::js"></th:block>
	<script src="../../static/js/lib/jweixin-1.2.0.js" th:src="@{/js/lib/jweixin-1.2.0.js}"></script>
	<script>
	    /**
	     * [placeOrder 下单]
	     * @param  {[type]} goodses[0].goodsId [商品ID]
	     * @param  {[type]} goodses[0].goodsType [商品类型]
	     * @param  {[type]} goodses[0].number [商品数量]
	     * @param  {[type]} $btn    [下单按钮]
	     * @param {[type]} payType [支付方式(wxPay/aliPay)]
         * @param {[type]} callBack [支付成功回调]
	     * @return {[type]}         [description]
	     */
		function placeOrder(goodses, $btn, payType, callBack) {
			var	postData = {
								goodses: goodses,
								terminal: 'Browser'
							};
		    $.ajax({
		        type: 'post',
		        url: '/money/orders',
		        data: JSON.stringify(postData), 
        		contentType: 'application/json',
		        dataType: 'json',
		        success: function(datas) {
		            if(datas.code == '200'){
		                // 下单成功
		                var _orderId = datas.results.orderId;
		                // if(_this.payType == 'gold') {
		                //     payForAccount(_orderId);
		                // } else if(_this.payType == 'mWxpay'){
		                //     payForMWx(_orderId);
		                // } else {
		                //     payForPC(_orderId, _this.payType);
		                // }
		                if(payType == 'wxPay') {
		                	if(device.isWX()) {
		                		WXPay(_orderId, $btn, callBack);
		                	}else {
		                		WXQRPay(_orderId, $btn);
		                	}
		                }
		            } else {
		                // 下单失败
		                toastr.error('下单失败,请联系客服');
		                $btn.removeAttr('disabled');
		            }
		        },
		        error: function(datas) {
		        	toastr.error('下单失败,请联系客服');
	                $btn.removeAttr('disabled');
		        }
		    });
		}
        /**
         * [WXPay 微信公众号支付]
         * @param {[type]} orderId  [订单ID]
         * @param {[type]} $btn     [支付按钮]
         * @param {[type]} callBack [支付成功回调]
         */
        function WXPay(orderId, $btn, callBack) {
            if (typeof WeixinJSBridge == "undefined"){
                if( document.addEventListener ){
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady(orderId, $btn, callBack), false);
                }else if (document.attachEvent){
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady(orderId, $btn, callBack));
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(orderId, $btn, callBack));
                }else{
			        $btn.removeAttr('disabled');
                	toastr.error('下单失败,请联系客服');
                }
            }else{
                onBridgeReady(orderId, $btn, callBack);
            }
        }
        function onBridgeReady(orderId, $btn, callBack){
            // var _orderId = Base.decode(orderId);
            $.ajax({
                type: 'get',
                url: '/money/orders/'+orderId+'/wechat/payOrder',
                dataType: "json",
                success: function (datas) {
                    // console.log(result);
                    if (datas.code == '200') {
                        var data = datas.results;
                        if(!data.hasOwnProperty('error')) {
                        	 WeixinJSBridge.invoke(
	                            'getBrandWCPayRequest', {
	                                "appId": data.appId,     //公众号名称，由商户传入
	                                "timeStamp":data.timeStamp,         //时间戳，自1970年以来的秒数
	                                "nonceStr": data.nonceStr, //随机串
	                                "package":data.package,
	                                "signType":data.signType,         //微信签名方式：
	                                "paySign":data.paySign //微信签名
	                            }, function(res){
	                                if(res.err_msg == "get_brand_wcpay_request:ok" ) {
	                                    toastr.success('购买成功！');
	                                    callBack();
	                                } else if(res.err_msg == "get_brand_wcpay_request:fail"){
	                                    toastr.error('购买失败, 请重试或联系客服');
			        					$btn.removeAttr('disabled');
	                                } else {
	                                    toastr.error('您取消了购买');
			        					$btn.removeAttr('disabled');
	                                }
	                            }
	                        );
                        }else {
                        	WXQRPay(orderId, $btn);
                        }
                    } else {
                        toastr.error(datas.message);
                    }
                },
                error: function(datas) {
		        	toastr.error('购买失败, 请重试或联系客服！');
					$btn.removeAttr('disabled');
		        }
            });
        }
        
        /**
         * [WXQRPay 微信扫码支付]
         * @param {[type]} orderId  [订单ID]
         * @param {[type]} $btn     [支付按钮]
         */
        function WXQRPay(orderId, $btn) {
        	var _orderId = Base.encode(orderId);
        	location.href = '/money/order/payForWx/'+ _orderId + '?from=vip';
        }
        /**
         * [doOrder 下单控制]
         * @return {[type]} [description]
         */
        function doOrder() {
	    	var $this = $(this);
	    	if($this.attr('disabled') == 'disabled') {
				return;
			}
			$this.attr('disabled','disabled');
			// 商品
			var _goodses = [{
						goodsId: $(this).attr('data-id'),
				      	goodsType: '01',
				      	number: 1
				}];
			/**
			 * [sFun 支付成功回调]
			 * @return {[type]} [description]
			 */
			var sFun = function() {
				$('.pay-ok-mod').show(200);
			};
	    	placeOrder(_goodses, $this, 'wxPay',sFun);
        }
        $(function() {
	        // 打开modal-user模态框里的登录tab
			$('.open-modal-login').on('click', function() {
				$('a[href="#user-login-tab"]').tab('show');
			});
			// 打开modal-user模态框里的注册tab
			$('.open-modal-reg').on('click', function() {
				$('a[href="#user-reg-tab"]').tab('show');
			});
		    // 下单控制
		    $('.btn-tovip').on('click', doOrder);
			// 头像设置
		    if($.trim($('.vip-header-head').text())!= '') {
		    	$('.vip-header-head').css('background-image','url('+$('.vip-header-head').text()+')');
		    }
		    // 登出
			$('.vip-logout-btn').on('click', function() {
				logout();
			});
		})
	</script>
</body>
</html>